<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radar Detection Animation</title>
  <style>
    body, html {
      height: 100%;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
    }
    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    .radar {
      position: absolute;
      width: 370px;
      height: 370px;
      border-radius: 50%;
      border: 2px solid #e9e9e9;
      box-sizing: border-box;
      overflow: hidden;
      background: radial-gradient(circle, rgb(249 67 106 / 50%), transparent);
      animation: radarGlow 2s infinite alternate;
    }
      .radar2 {
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      border: 1px solid rgb(255 255 255 / 26%);
      box-sizing: border-box;
      overflow: hidden;
    }
        .radar3 {
      position: absolute;
      width: 270px;
      height: 270px;
      border-radius: 50%;
      border: 3px solid rgb(255 255 255 / 70%);
      box-sizing: border-box;
      overflow: hidden;
    }
	 .radar4 {
       position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid rgb(255 255 255 / 26%);
      box-sizing: border-box;
      overflow: hidden;
    }

	 .radar5 {
       position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px solid rgb(255 255 255 / 70%);
      box-sizing: border-box;
      overflow: hidden;
    }
    .scan-line {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: calc(30%);
      background: linear-gradient(to bottom, rgba(30, 144, 255, 0), #ffffff, rgba(30, 144, 255, 0));
      transform-origin: center;
      animation: scan 3s linear infinite;
    }
    @keyframes scan {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
    @keyframes radarGlow {
      from {
        box-shadow: 0 0 10px rgb(255 255 255 / 50%), 0 0 20px rgb(255 255 255 / 30%);
      }
      to {
        box-shadow: 0 0 20px rgb(255 255 255 / 80%), 0 0 40px rgb(255 255 255 / 60%);
      }
    }
    .concentric-circles {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    .concentric-circles div {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(30, 144, 255, 0.5);
    }
    .full-screen-scan-line {
      position: absolute;
      top: 0;
      left: 5%;
      width: 90%;
      height: 2px;
      background: linear-gradient(to bottom, rgba(30, 144, 255, 0), #1e90ff, rgba(30, 144, 255, 0));
      animation: scanLine 3s linear infinite;
    }
    @keyframes scanLine {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100vh);
      }
    }
    .scan-trail {
      position: absolute;
      top: 0;
      left: 5%;
      width: 90%;
      height: 2px;
      background: linear-gradient(to bottom, rgba(30, 144, 255, 0), rgba(30, 144, 255, 0.5), rgba(30, 144, 255, 0));
      animation: scanLine 3s linear infinite, trailFade 1.5s linear infinite;
    }
    @keyframes trailFade {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }

.blinking-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 50%;
  animation: blinking 2s infinite;
}

@keyframes blinking {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
}
  </style>
</head>
<body>

<div class="radar">
  <div class="concentric-circles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="scan-line"></div>
</div>

<div class="radar2"></div>
<div class="radar3"></div>
<div class="radar4"></div>
<div class="radar5"></div>
<!-- <div class="full-screen-scan-line"></div> -->
<!-- <div class="scan-trail"></div> -->
<div class="blinking-light"></div>
<!-- Particle System Canvas -->
<canvas id="particleCanvas"></canvas>



<script>
  const canvas = document.getElementById('particleCanvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.radius = Math.random() * 2;
      this.life = Math.random() * 5 + 2;
      this.velocity = {
        x: (Math.random() * 2 - 1) * 0.5, // Speed between -1 and 1
        y: (Math.random() * 2 - 1) * 0.5 // Speed between -1 and 1
      };
      this.color = `rgba(30, 144, 255, ${Math.random()})`;
    }

    update() {
      this.x += this.velocity.x;
      this.y += this.velocity.y;
      this.life -= 0.01;

      // Bounce off the walls
      if (this.x < 0 || this.x > canvas.width) {
        this.velocity.x = -this.velocity.x;
      }
      if (this.y < 0 || this.y > canvas.height) {
        this.velocity.y = -this.velocity.y;
      }

      if (this.life <= 0) {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.life = Math.random() * 5 + 2;
      }
    }

    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.fill();
    }
  }

  const particles = [];
  const numberOfParticles = 200;

  for (let i = 0; i < numberOfParticles; i++) {
    particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
  }

  function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(particle => {
      particle.update();
      particle.draw();
    });
  }

  animate();
</script>

</body>
</html>